<template>
  <!-- 头列 -->
  <div class="main-header">
    <router-link to="/index" class="router-link-button">
      主页
    </router-link>

    <router-link to="/" class="router-link-button">
      预约挂号
    </router-link>

    <router-link to="/doctor-information" class="router-link-button">
      医院信息
    </router-link>


    <!--    个人中心下拉框-->
    <el-row class="block-col-2 andRight">
      <el-col :span="12">
        <el-dropdown trigger="click">
          <a class="router-link-button">
            个人中心
          </a>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button type="text" class="Drop-down-button-style" @click="handleDetailClick">
                查看详细
              </el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link class="Drop-down-button-style" to="/Appointment">
                预约记录
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <div>
      <el-dialog title="我的详细信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <div>
          <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div id="show-table">
              <el-form-item label="姓名" prop="username" id="usernameDel">
                <el-input v-model="currentUserData.name"  class="inputDelCss"></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname" id="nicknameDel">
                <el-input v-model="currentUserData.nickName" class="inputDelCss"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phone" id="phoneDel">
                <el-input v-model="currentUserData.phone" class="inputDelCss"></el-input>
              </el-form-item>
            </div>
            <div id="revise-table">
              <el-form-item label="修改密码:" prop="password">
                <el-input
                    v-model="user.password"
                    type="password"
                />
              </el-form-item>
              <el-form-item label="确认密码:" prop="江仁龙">
                <el-input
                    v-model="confirmPassword"
                    type="password"
                />
              </el-form-item>

            </div>
            <el-button @click="ToShowHide('')" id="revise-button">忘记密码</el-button>
            <el-button @click="ToShowHide('goShow')" id="revise-return">返回</el-button>
            `
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            `
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;submitRevise()" id="submit-button">提 交</el-button>
  </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {defineComponent} from 'vue'
import axios from "axios";

export default defineComponent({
  name: "MainHeader",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.confirmPassword !== "") {
          this.$refs.user.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      currentUserData: {},
      user: {
        userId: '',
        name: '',
        nickname: '',
        phone: '',
        password: '',
      },
      confirmPassword: '',
      dialogVisible: false,
      rules: {
        username: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (!/^[a-zA-Z0-9\u4e00-\u9fa5]{1,8}$/.test(value)) {
                callback(new Error('请输入1-8个中文、英文或数字字符'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (!/^[a-zA-Z0-9\u4e00-\u9fa5]{1,8}$/.test(value)) {
                callback(new Error('请输入1-8个中文、英文或数字字符'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            min: 6,
            max: 33,
            message: '请输入6-33个字符的密码',
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            validator: validatePass2,
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {
            pattern: /^1[3-9]\d{9}$/, // 以1开头，后面跟10位数字
            message: '请输入有效的电话号码',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  methods: {
    /*成功修改数据并提交*/
    submitRevise() {
      this.user.userId = this.currentUserData.userId;
      this.user.name = this.currentUserData.name;
      this.user.nickname = this.currentUserData.nickName;
      this.user.phone = this.currentUserData.phone;
      console.log('提交表单', this.user);
      // 发送请求
      this.$axios.post('user/updateUserByUserId', this.user)
          .then(result => {
            console.log('修改成功');
            // 重新获取用户数据
            this.getUserAllData();
            // 关闭对话框
            this.dialogVisible = false;
          })
    },
    /*获取当前用户数据*/
    getUserAllData() {
      // 日志记录优化：使用更高级的日志记录方案，这里保持使用console.log，实际项目中应替换
      console.log('获得用户数据');
      // 从localStorage获取用户数据，并进行有效性验证
      let userString = localStorage.getItem("user");
      let user = JSON.parse(userString);
      let userId = user.userId;
      // 使用传入的userId参数，提高函数的通用性和灵活性
      this.$axios.get('user/getOneUserByUserId/' + userId)
          .then(result => {
            this.currentUserData = result.data.data
            localStorage.setItem('cUsername', this.currentUserData.nickName)
            console.log('当前用户数据', this.currentUserData);
          })
    },
    handleDetailClick() {
      this.dialogVisible = true;
      // 延迟一段时间后执行操作
      setTimeout(() => {
        this.toHide();
      }, 100); // 100 毫秒延迟，可以根据实际情况调整
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*隐藏或显示元素*/
    toHide() {
      console.log('启动时隐藏');

      // 设置只读
      document.getElementById("nicknameDel").readOnly = true;
      document.getElementById("usernameDel").readOnly = true;
      document.getElementById("phoneDel").readOnly = true;

      const divElement1 = document.getElementById('revise-table');
      const divElement2 = document.getElementById('revise-return');
      const divElement3 = document.getElementById('submit-button');
      const divElement4 = document.getElementById('revise-button');

      // 清除表单验证状态
      this.$refs['ruleForm'].clearValidate();

      if (divElement1 && divElement3) {
        divElement1.style.display = 'none';
        divElement2.style.display = 'none';
        divElement3.style.display = 'none';
        divElement4.style.display = '';
      } else {
        console.error('找不到相关元素或元素不存在');
      }
    },
    ToShowHide(judge) {
      if (judge === 'goShow') {

        console.log('去显示页面')// 隐藏修改的内容
        const divElement1 = document.getElementById('revise-table');
        divElement1.style.display = 'none';
        const divElement2 = document.getElementById('revise-button');
        divElement2.style.display = '';
        const divElement3 = document.getElementById('revise-return');
        divElement3.style.display = 'none';
        const divElement4 = document.getElementById('submit-button');
        divElement4.style.display = 'none';
        /*设置为只读*/
        document.getElementById("nicknameDel").readOnly = true;
        document.getElementById("usernameDel").readOnly = true;
        document.getElementById("phoneDel").readOnly = true;
      } else {
        console.log('去修改页面')
        const divElement1 = document.getElementById('revise-table');
        divElement1.style.display = '';
        const divElement2 = document.getElementById('revise-button');
        divElement2.style.display = 'none';
        const divElement3 = document.getElementById('revise-return');
        divElement3.style.display = '';
        const divElement4 = document.getElementById('submit-button');
        divElement4.style.display = '';
        // 取消只读
        document.getElementById("usernameDel").readOnly = false;
        document.getElementById("nicknameDel").readOnly = false;
        document.getElementById("phoneDel").readOnly = false;
      }
    }
  },
  mounted() {
    /*获取当前用户数据*/
    this.getUserAllData();
  }
})
</script>

<style scoped>
.IDelCss {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

/*隐藏元素*/
.btn-hidden {
  display: block;
}

.andRight {
  margin-left: auto;
  margin-right: 100px;
}

/* 头列 */
.main-header {
  width: 100vw;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #3498DB;
}

/* 头列按钮 */
.main-header a {
  z-index: 10;
  width: 90px;
  height: 100%;
  /* 排版 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/*跳转按钮*/
.router-link-button {
  font-weight: 1000;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

/*下拉框按钮*/
.Drop-down-button-style {
  text-decoration: none;
  color: #606266;
}
</style>
